<template>
	<view class="main-cont">
		<view class="box box-pack-between box-align-center padd20 bgcfff">
			<view class="">
				已完成:7人
			</view>
			<u-button shape="circle" :custom-style="customStyle">催交未完成</u-button>
		</view>
		<view class="stu-main">
			<view class="list box box-align-center">
				<view class="sort">排名</view>
				<view class="name">姓名</view>
				<view class="check">完成度</view>
				<view class="score">得分</view>
			</view>
			<view class="list box box-align-center" v-for="(item, index) in list" :key="index">
				<view class="sort box box-align-center box-pack-center" v-if="index<=2">
					<u-image src="@/static/home/sort_1.png" width="38rpx" height="45rpx" v-if="index == 0"></u-image>
					<u-image src="@/static/home/sort_2.png" width="38rpx" height="45rpx" v-if="index == 1"></u-image>
					<u-image src="@/static/home/sort_3.png" width="38rpx" height="45rpx" v-if="index == 2"></u-image>
				</view>
				<view class="sort sort box box-align-center box-pack-center" v-if="index>2">{{parseInt(index)+1}}</view>
				<view class="name box box-align-center box-pack-center">
					<u-avatar :src="src" mode="circle" size="72"></u-avatar>
					<view class="ml10">
						{{item.name}}
					</view>
				</view>
				<view class="check">{{item.sort}}</view>
				<view class="score">{{item.score}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					color: "#fff",
					width: "147rpx",
					height: "46rpx",
					background: "#626BF1",
					fontSize: "24rpx"
				},
				thStyle: {
					backgroundColor: "#fff"
				},
				list:[{
					id:1,
					name:"张三1",
					sort:1,
					score:522,
					checked: false,
					url:"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950846641,3729028697&fm=26&gp=0.jpg",
					number:'202101011010'
				},
				{
					id:2,
					name:"张三2",
					sort:2,
					score:520,
					checked: false,
					url:"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950846641,3729028697&fm=26&gp=0.jpg",
					number:'202101011010'
				},
				{
					id:3,
					name:"张三3",
					sort:3,
					score:500,
					checked: false,
					url:"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950846641,3729028697&fm=26&gp=0.jpg",
					number:'202101011010'
				},
				{
					id:4,
					name:"张三4",
					sort:4,
					score:50,
					checked: false,
					url:"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950846641,3729028697&fm=26&gp=0.jpg",
					number:'202101011010'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			goIndex(index) {
				this.current = index
				uni.switchTab({
					url: this.list[index].pagePath
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		margin: 20rpx 14rpx;
		width: 722rpx;
		height: 100%;
		overflow-y: auto;
		background-color: #fff;

		.bgcfff {
			background-color: #fff;
		}

		.bottom {
			width: 100%;
		}
		
		.stu-main{
			padding: 20rpx 50rpx;
		}
		.list {
			padding: 20rpx 0;
			width: 100%;
			height: 100%;
		}

		.check {
			width: 100rpx;
			text-align: center;
		}

		.sort {
			width: 60rpx;
			text-align: center;
		}
 
		.name {
			text-align: center;
			width: 347rpx;
		}

		.score {
			text-align: center;
			width: 120rpx;
		}

	}
</style>
